<template>
  <div class="page swiper-page">
    <div class="box">
      <div class="img-box">
        <img src="../../assets/image/riven/1.jpg" alt="">
        <img src="../../assets/image/riven/2.jpg" alt="">
        <img src="../../assets/image/riven/3.jpg" alt="">
        <img src="../../assets/image/riven/4.jpg" alt="">
        <img src="../../assets/image/riven/5.jpg" alt="">
        <img src="../../assets/image/riven/1.jpg" alt="">
      </div>
    </div>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.swiper-page {
  .box {
    height: 180px;
    width: 320px;
    position: relative;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px;
    margin: 100px auto;
  }
  .img-box {
    position: absolute;
    top: 0;
    left: 0;
    height: 180px;
    width: 1921px;
    animation-name: swiper-trans;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }
  .img-box img {
    width: 320px;
    height: 180px;
    float: left;
  }
  @keyframes swiper-trans {
    0% {
      margin-left: 0;
    }
    15% {
      margin-left: 0;
    }
    20% {
      margin-left: -320px;
    }
    35% {
      margin-left: -320px;
    }
    40% {
      margin-left: -640px;
    }
    55% {
      margin-left: -640px;
    }
    60% {
      margin-left: -960px;
    }
    75% {
      margin-left: -960px;
    }
    80% {
      margin-left: -1280px;
    }
    95% {
      margin-left: -1280px;
    }
    100% {
      margin-left: -1600px;
    }
  }
}
</style>